Here are some people in the Twitter design community who are well known for their work in design systems:
@BradFrost: Creator of Atomic Design, a popular approach to design systems.
@joffreyherpin: Senior UX designer at Shopify, where he leads the design system team.
@donsng: Design systems lead at Google, where he works on the Material Design system.
@rachelandrew: Design systems lead at Airbnb, where she works on the Airbnb Design System.
@martinwolf: Design systems lead at Amazon, where he works on the Polaris Design System.
@sarasoueidan: Design systems lead at Figma, where she works on the Figma Design System.
@kathysierra: UX designer and author, who is known for her work on design systems and accessibility.
@amybucher: Design systems lead at Salesforce, where she works on the Lightning Design System.
@lukew: UX designer and author, who is known for his work on design systems and user experience.
@danmall: Design systems lead at Microsoft, where he works on the Fluent Design System.
@twipple: Design systems lead at Atlassian, where he works on the Design System.
@heydonworks: Design systems lead at Intuit, where he works on the Design System.
I hope this list is helpful!
Please note that this is just a sample of people who are well known in the Twitter design community for their work in design systems. There are many other great people out there who are doing great work in this area.
Also talk about how the post got good enough traction
I love keyboards(show a picture of my keyboards)
i love building them
(showcase my renders, the keyboard project)
my feed is full of them
(show a instagram/pinterest feed full of them)
i have a poster on my wall with a keyboard.
(show the poster on my wall, photoshop it to get light effect and lens flares and stuff)
and i love learning new unique keyboard layouts
(show qwerty leading into a flowchart to colemak, dvorak, arsenito)
i love typing as well,
(put an old video of me typing, and a screenshot of my highscore of wpm and also link an embed of that monkeytype link.)
The concept of being a digital weaponsmith is super appealing to me. In any era, having the best tool in your arsenal is a game-changer. The digital era is no different. I've realised I want to build digital tools, that enable the game-changers of this century
The concept that the best warriors dont adapt to their weapon but choose a weapon that suits them the best. In the digital era, our entire lives are on a computer, choosing the best weapon here means to choose the best workspace tools that work the best with you, not the other way around. for me that meant designing those tools myself, for myself with software custom programmed for myself
(refer to the stream design guidelines brief)
show software and hardware (laser cutting) and final output
thats what led me into the realm of custom mechanical keyboards
So when building this custom keyboards, they require custom code, and the functionality behind these keyboards. the purpose is to make hand movement as simple as possible, we do this through layers
Specifically ortholinear keyboards are built around the concept of reducing the maximum amount of movement that is put on your hands, for this we shrink down the keys and put them in layers
(look at that video and how they explain, and also qmk documentation for how they approach it)
but the drawback to this is that newcomers have a steep learning curve and as a memeber of a 140k community
(showcase the reddit numbers)
we want to share our digital weaponry to more people in the world.
(can you put like a nice cute illustration?)
and when the instruction manual to your keyboard looks like this, its no reason that people tend to think its not worth it.
miryoku layout also showcase it
I wanted to build a replacement for that using figma's design systems and also try my hand at builiding one out
how many possibilities are possible, use the qmk documentation framework to explain this.
explain why its important to have high legibility in the text
Hardcore edit it to a person who doesnt even understand what keyboards are even useful for
this looks like my homework 🤮
tons of layouts and tons of combinations are possible
toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right
4 variables that are possible to put
showcase the qmk documentation and how many combinations that are possible for all the entries, this is just a show off move so prolly put this in the last
irl mockup and use case
showcase the final card layout in like a nice mockup and a nice real life prototype
You can check out the layout builder on the figma community page
show the figma community page for the template
and its been getting some pretty good responses as well from the community!
show the reddit stats and the people commenting nice things.
look at how perry wang does it.
A normal person should understand your passion
Would the greatest samurai of all time be given a sword from the warroom? no. he's given a specially crafted blade thats specifically crafted for his specifications.
So why do we settle for general hardware thats mass produced. That's my approach on keyboards, our entire lives are spent in a computer and our hardware is the key to the entire system.
Thats why i build custom keyboards, with custom hardware with custom software. everything built ground up put into place with intention
But theres a problem, a pretty steep learning curve and its of no help when the only instruction manual that you have looks like this
A bandaid solution in the community is to print out these cheat sheets that you keep near you, so that you can refer to it all times.
when you search up problems of learning a new keymap a lot of people talk about making a cheat sheet, but noone really tells you how...
theres a few ways, and almost all of them are ugly and BIG.
the best one i could find was this site called qmk configurator it was code documentation
make a mockup of a page and a card right next to each other and show how much of an improvement it is.
trust me when you pull out a big ass sheet to look for your keymaps it just looks dumb.
show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎
i wanted to make it as easy as possible to make a cheat sheet for learning keymaps and i wanted to make it not obnoxiously big or embarassing while learning the keymap
I built the figma design system for this purpose, you can go in and configure almost 999999+ possibilites and its pretty cool to see the community actually exhcange their tactics and ideas for productivity workflows.
put reddit commments here that people actually liked the idea and stuff
It would be foolisht to think the greatest Samurai werent given random swords from the warroom. They had custom swords built for them, designed to their exact specifications. The greatest players take help from the greatest gear to enable them to perform better.
Similarly,
Most of us earn our living through the internet, then why do we settle for subpar mass produced hardware?
I love building custom keyboards, and it revolves around the fact that i can build everything from the ground up, every piece put into place with intention, from building my own hardware, to the customizing its feel(my own modifications), to coding my own software.
show all your keyboards, the planck, the corne, the normal keyboard
Some people think it's over the top, but the feel of technology custom fit for you and only you, is something that appeals to a lot of people
showcase the reddit numbers of people
But theres a problem,
a pretty steep learning curve and its of no help when the only instruction manual that you have looks like this
A learning resource for a new keymap a lot of people talk about, is making a cheat sheet.
but noone really tells you how...
searched around and found a few ways, and almost all of them are UGLY and BIG.
the best one i could find was this site called qmk configurator it was code documentation
make multiple mockups of how the code document looks like, make the qmk configurator page, and make the page of
pulling out an entire 2 page printout of your keyboard to look up where a key is programmed, isnt the best solution. -_-
show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎
i wanted to make it as easy as possible to make a cheat sheet for learning keymaps and i wanted to make it not obnoxiously big or embarassing while learning the keymap
I built the figma design system for this purpose, you can go in and configure almost 999999+ possibilites and its pretty cool to see the community actually exhcange their tactics and ideas for productivity workflows.
put reddit commments here that people actually liked the idea and stuff
Explain how the hobby works, how colemak dh works explain how setting up number systems for programmers is different from an accountants
show them the exisiting solutions and showcase what the trouble is
to see evverything i have to navigate through the layers.
(show a gif of this)
all the types of buttons
1u
1.5u
2u
2.5u
Show miryoku layouts that were very popular,
show barnum layouts that are also very popular
and explain why theyre principles are awesome
Why are yo ubuilding this sytem cuz theres a learning curve
What do i need for this??
Print guidelines
Pressed variants and hover states
Build a design system
Type Positioning
this ir what a very common keymap called the miryoku looks ilke in its reference map
Layout types
Row Stagger
Column stagger
some design decisions that influenced the design were that they had to be seen a far and be understood in a glance. so for this ive used high contrast values
(show them the AAA ratings of some plugin)
also for this reason all the same layer keybinds are all the same colour for easy recall and finding it
Pro Micro illustration
Make a book
with the kbdnews tags in place
Seen tons of ortho layouts but theyre horribly designed
and theyre designed in a CODE EDITOR!! which makes absolutely no sense
"Pasted image 20230907200527.png" is not created yet. Click to create.
and qmk configurator doesnt allow to see all the layers one by one
What are all the factors that will play into it
Show reddit reviews and applause
Explain the anecdote of if youre a warrior you need the weapon to built for you not the other way around.
I wanted to create and easy to use keymap cheat sheet that wouldn't be obnocisouly large or embarrassing while learning
can you give a learning analogy here
20 years ago, programming was so hard only professionals who spent years could code, nowadays theres kids leraning coding using cool interactive simple games.
This is my effort to help people explore a whole new world of productivity by helping people get a bit less scared with starting out.
Shorten this to be super crisp and precise.
Hit it hard here, the fact that theyre entire life is in front of something that you use everyday and drive this point across really sharply
I love building custom keyboards, it allows me to build everything from the ground up.
my own hardware,
my own modifications.
my own software,
every piece put into its place with intention.
People start to realize that theyre wasting their life with waste hardware, can you highlight some very important qmk features using illustrations
I want to be able to help the learning process with some cheat sheet layer reference guide
and this is how mine looks like with my setup
show a mockup of a business card with your keyboard layout on it.
Many of us earn our living through the internet, then why do we rely on outdated tools and technology input devices that are mass manufactured. Just cuz its the norm, noone strays from the status quo, noone has questioned why we got so used to suffering with devices that dont suit us anymore.
show all the crazy wacky keyboards that you've built
This is why i love building custom keyboardds it allows me to build everything from the ground up.
my own hardware.
my own modification
my own software.
Every piece put into it's place with intention.
Keyboard tech has evolved to give birth to so much more superior possibilites
show that thanos gif with all the possibilities and also include the caption shown in that website.
this is barely scratching the surface of whats possible
To some people its over the top, but the feel of a device crafted for you and only you, is exciting for a lot of tech enthusiasts.
showcase the reddit numbers across custom mechanical keyboards
Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isnt very helpful that the only instruction manual that you have looks like this
I want to help people get less scared with the technical detaisl of keyboard making, hopfully a lot more people will love the hobby the way I do!
A helpful tool for learning a new keymap is to make a cheat sheet for all the keys.
noone really tells you how to make one tho...
most of the solutions are either UGLY or BIG. :(
show the qmk document page, show code documents, show excel sheet of keymap
the best one i could find was a site that could give you printouts of your keymap. but pulling out an entire 2 page printout of your keyboard just to look up where a key is programmed isnt the best solution. -_ -
show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finnding the keymap on tha layout.
Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery
I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.
show a mockup of the business card in real life with the keyboard also in the middle
With the Current QMK basic keycodes you should be able to do about 309234+ possibilities,
toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right
You can check out the layout builder on the figma community page
show the figma community page for the template
and its been getting some pretty good responses as well from the community!
show the reddit stats and the people commenting nice things.
look at how perry wang does it.
shorten this, this is high impact



Look up more case studies that talk about design systems and all
Use this copy as a good placeholder starting

show a mockup of a business card with your keyboard layout on it.
Many of us earn our living through the internet, then why do we rely on outdated tools and technology input devices that are mass manufactured. Just cuz its the norm, noone strays from the status quo, noone has questioned why we got so used to suffering with devices that dont suit us anymore.
show all the crazy wacky keyboards that you've built
This is why i love building custom keyboardds it allows me to build everything from the ground up.
my own hardware.
my own modification
my own software.
Every piece put into it's place with intention.
Keyboard tech has evolved to give birth to so much more superior possibilites
show that thanos gif with all the possibilities and also include the caption shown in that website.
this is barely scratching the surface of whats possible
To some people its over the top, but the feel of a device crafted for you and only you, is exciting for a lot of tech enthusiasts.
showcase the reddit numbers across custom mechanical keyboards
Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isnt very helpful that the only instruction manual that you have looks like this
Making the hobby more friendly might help people overcome their fear of technical complexity
A helpful tool for learning a new keymap is to make a cheat sheet for all the keys.
noone really tells you how to make one tho...
most of the solutions are either UGLY or BIG. :(
show the qmk document page, show code documents, show excel sheet of keymap
the best one i could find was a site that could give you printouts of your keymap. which is a horribly inconvenient solution.
show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finnding the keymap on tha layout.
Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery
I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.
show a mockup of the business card in real life with the keyboard also in the middle
With the Current QMK basic keycodes you should be able to do about 309234+ possibilities,
toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right
You can check out the layout builder on the figma community page
show the figma community page for the template
and its been getting some pretty good responses as well from the community!
show the reddit stats and the people commenting nice things.
look at how perry wang does it.
show a mockup of a business card with your keyboard layout on it.
Many of us earn our living through the Internet. Why do we still rely on outdated hardware input devices that are mass-manufactured and slow us down?
show all the crazy wacky keyboards that you've built
This is why I love building custom keyboards it allows me to build everything from the ground up.
my hardware.
my modification.
my software.
Every piece is put into its place with intention.
Keyboard tech has evolved to give birth to so many superior possibilities
show that Thanos gif with all the possibilities and also include the caption shown on that website.
this is barely scratching the surface of what's possible
To some people, it's over the top, but the feel of a device crafted for you and only you is exciting for a lot of tech enthusiasts.
showcase the Reddit numbers across custom mechanical keyboards
Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isn't very helpful that the only instruction manual that you have looks like this
Making the hobby more friendly might help people overcome their fear of technical complexity
A helpful tool for learning a new keymap is to make a cheat sheet for all the keys
show the twitter and reddit comments on this topic
No one tells you how to make one tho...
most of the solutions are either UGLY or BIG. :(
show the qmk document page, show code documents, show the Excel sheet of keymap
the best one I could find was a site that could give you printouts of your keymap. which is an inconvenient solution.
show a top-down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finishing the keymap on the layout.
Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery
I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.
show a mockup of the business card in real life with the keyboard in the middle
With the Current QMK basic keycodes, you should be able to do about 309234+ possibilities,
toolbar changing on the left with the canon grid background and there the layouts are changing saying the name of each change on the right
You can check out the layout builder on the Figma community page
show the Figma community page for the template
and it's been getting some pretty good responses as well from the community!
show the Reddit stats and the people commenting nice things.
look at how perry wang does it.
I want to help people get less scared with all the technical stuff, hopefully a lot more people will take the first step then
Making the hobby more approachable might bring more people to see past the scariness of the technical complexity
Making the hobby more approachable might bring people overcome their fear of the technical complexity
Making the hobby more friendly might help people overcome their fear of all the technical complexity